
<template>
  <views class="enterprise_gen_verify">
    <viewTitle :title="'付款审核'" :border="false"></viewTitle>
    <!-- 搜索栏  企业端-代理商端-服务商端 -->
    <el-form ref="form" label-width="auto" :inline="true">
    <div class="search flex flexR center">
      <!-- 所属服务商-批次编号-提交时间 -->
      <div class="search_input flex flexR center">
        <div class="pay_state flex flexR center">
          <el-form-item label="业务批次号:">
          <el-input v-model="all.form.batch_number" placeholder="请输入业务批次号" :clearable="true"></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="search flex flexR center">
        <el-form-item label="状态:">
          <el-select v-model="all.form.status" clearable placeholder="请选择">
            <el-option
                    v-for="item in all.form.status_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <!-- 充值时间  按钮 (查询、重置、导出列表、录单)-->
      <!-- <div class="pay_btn flex"> -->
        <!-- 充值时间 -->
        <div class="pay_time flex flexR center">
          <el-form-item label="提交时间:">
          <el-date-picker
            v-model="all.form.put_time"
            type="datetimerange"
            align="right"
            :default-time="['0:00:00','23:59:59']"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
           </el-form-item>
        <!-- </div> -->
      </div>
    </div>
      <div class="search_input flex flexR center">
        <!-- 按钮（查询、重置、导出列表、录单）  录单属于服务商端 -->
        <el-form-item :style="{padding:'0 15px'}">
          <div class="flex flexR pay_btn_list">
            <el-button type="primary" @click="query_search"  icon="el-icon-search">查看</el-button>
            <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>

    <div class="search_input flex flexR center" >
      <div :style="{marginLeft:'15px'}" class="show-title-money flex flexR">
        <div class="flex flexR">
          <div>交易笔数</div>
          <div class="price">{{pagination.total_count}}</div>
          <div>笔</div>
        </div>
        <div class="flex flexR">
          <div>交易金额(元)</div>
          <div class="price">￥{{pagination.summy ? $splitK(pagination.summy) : ''}}</div>
        </div>
      </div>
    </div>

    <!-- 展示列表 -->
    <div class="table_list">
      <el-table
        border
        :data="all.tableData"
        style="width: 100%;max-width:none;"
        :header-cell-style="getRowClass"
        :select-on-indeterminate="true"
        :fit="true"
        :lazy="true"
        @row-click="clickRow"
        max-height="450"
      >
        <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
        <el-table-column  prop="enterprise_order_sn" label="业务批次号"></el-table-column>
        <el-table-column prop="enterprise_name" label="企业名称"></el-table-column>
        <!--<el-table-column prop="source" label="来源" width="120"></el-table-column>-->
        <el-table-column prop="created_time" label="提交时间" ></el-table-column>
        <el-table-column prop="count" label="汇总笔数" width="100"></el-table-column>
        <el-table-column prop="total_money" label="汇总金额" ></el-table-column>
        <el-table-column prop="status_desc" label="状态" width="150"></el-table-column>
        <el-table-column prop="zip" label="操作" fixed="right" width="100"  v-if="isLook || isCheck">
          <div class="table_operation" slot-scope="scope">
             <!-- 服务 >1 详情  企业大于0 -->
             <el-button type="primary" v-if="getTerrace==1 && scope.row.status>0 && isLook" @click="re_check(scope)">详情</el-button>
             <el-button type="primary" v-if="scope.row.status == 0 && isCheck" @click="re_check(scope)">复核</el-button>
          </div>
        </el-table-column>
      </el-table>
        <div class="paging flex flexR">
          <el-pagination
            style="background:#fff; padding:10px 0"
            background
            layout="total, sizes,prev, pager, next, jumper"
            @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
            @current-change="(page_start) => {this.pagination.page_start = page_start;this.getData()}"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagination.page_size"
            :total="pagination.total_count"
            :current-page="pagination.current_page"
            :page-count="pagination.page_count"
          ></el-pagination>
        </div>  
    </div>
  </views>
</template>



<script>
import  {mapGetters}  from 'vuex'

export default {
  data() {
    return {
      //  三段综合  企业端    服务商端
      all: {
        form: {
          their_facilitator: "", //  所属服务商
          their_facilitator_list: [{ value: "选项1", label: "黄金糕" }], // 所属服务商列表
          batch_number: "", //  批次编号
          put_time: "", //  提交时间
          status:"",
          status_list: [
              {
                  value: "",
                  label: "全部"
              },
              {
                  value: "0",
                  label: "未审核"
              },
              {
                  value: "1",
                  label: "企业内部通过审核"
              },
              {
                  value: "4",
                  label: "已全部打款"
              },
              {
                  value: "5",
                  label: "审核不通过"
              }
           ],
        },
        tableData: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      pagination: {
        //分页数据
        page_start: 1, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      },
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    //实时计算要传输的编辑参数
    post_data() {
      let data = {},
        time_list = this.all.form.put_time || [];
      if (time_list&&time_list.length > 0) {
          data.created_time_start =time_list[0]/1000;
          data.created_time_end  =  time_list[1]/1000;
      }
      data.enterprise_order_sn = this.all.form.batch_number || ""; // 批次编号
      data.pagination = this.pagination;
      if(this.all.form.status){
          data.status = this.all.form.status || ""; // 批次编号
      }
      return data;
    },
    getTerrace(){
      return  this.$store.state.terrace; 
    },
    ...mapGetters(['getButtonPermission']),
    isLook(){
      return  this.getButtonPermission[this.$route.path]  &&  this.getButtonPermission[this.$route.path].look ? 1 : 0;
    },
    isCheck(){
      return  this.getButtonPermission[this.$route.path]  &&  this.getButtonPermission[this.$route.path].check ? 1 : 0;
    }
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    //  搜索/查询
    query_search() {
      console.log("查询数据", this.all.form);
      this.getData();
    },
    //  重置
    reset() {
      this.all.form.status = "";
      this.all.form.their_facilitator = ""; //  所属服务商
      this.all.form.batch_number = ""; //  批次编号
      this.all.form.put_time = ""; //  提交时间
      this.getData();
    },
    re_check(scope) {
      console.log('scope',scope)
      this.$toRoutePath({
        path: "/enterprise_gen_verify/re_check",
        edit: true,
        query: {
          enterprise_order_id: scope.row.enterprise_order_id
        }
      });
    },
    // 代发审核查询接口
    getData() {
      let res = {};
      if(this.getTerrace == 1){     //企业端
        res = this.$api.sendSync(this.$mapapi.e_getOrderList,this.post_data);
      }else if(this.getTerrace == 3){     //服务端 f_getOrderCheckList
        res = this.$api.sendSync(this.$mapapi.f_getOrderCheckList,this.post_data);
      }
      if(res.code != 200 && res.code != 501){
        this.$message.error(res.msg);
        return;
      }
      this.all.tableData = res.data.list || [];
      this.pagination = res.data.pagination || {};

    },
    handleSizeChange(e) {
      console.log(e, "sss");
    },
    changePage(e) {
      console.log(e, "eee");
    }
  },
  created() {}
};
</script>


<style lang="less" :scope="true"  src="@/style/issuing/enterprise_gen_verify.less" >
</style>